import React from 'react'
import { connect } from 'react-redux'
import { push } from 'connected-react-router'
import { listTable as listTableDuck } from 'ducks'
import { Label, Icon } from 'semantic-ui-react'
import ListTable from 'components/ListTable'
import getClassPageInfo from 'graphql/project/config/classPageInfo.graphql'
import getClasses from 'graphql/project/config/classList.graphql'
import deleteClass from 'graphql/project/config/deleteClass.graphql'
import Icons from 'utils/constents/icons'

const FileList = actionInit => ({ data }) => {
  const makeOpt = id => [
    {
      src: Icons.DELETE,
      text: '删除',
      action: () => actionInit({
        graphqlAction: deleteClass,
        submitValues: { id },
        icon: 'trash alternate',
        title: '删除标记类型',
        message: '请注意：删除会同时删除属于该标注类型的标记',
      }),
    },
  ]
  const projectTags = data.tag.reduce((pre, next) => {
    pre[next.id] = next
    return pre
  }, {})
  return (
    <React.Fragment>
      {data.project_class.map(dataset => (
        <ListTable.Row>
          <ListTable.Cell>{dataset.name}</ListTable.Cell>
          <ListTable.Cell>
            <Label circular style={{ backgroundColor: `${dataset.color}` }} size="mini" />
          </ListTable.Cell>
          <ListTable.Cell>{dataset.type}</ListTable.Cell>
          <ListTable.Cell>
            {dataset.setting
              && dataset.setting.tags
              && dataset.setting.tags.map(tag => (
                <Label
                  basic
                  style={{
                    color: `${projectTags[tag].config.color}`,
                    borderColor: `${projectTags[tag].config.color}`,
                  }}
                >
                  {projectTags[tag].name}
                  <Icon name="delete" />
                </Label>
              ))}
          </ListTable.Cell>
          <ListTable.Action width={2} options={makeOpt(dataset.id)} />
        </ListTable.Row>
      ))}
    </React.Fragment>
  )
}

const ClassList = ({ project, match, actionOpen }) => {
  const { projectId } = project
  const RenderList = FileList(actionOpen)
  const newUrl = `/project/${project.orgName}/${project.projectName}/config/class/new`
  return (
    <ListTable
      globalActions={[
        {
          text: '添加新类型',
          url: newUrl,
        },
      ]}
      search={{ text: '搜索' }}
      sort
      pagination={{
        query: getClassPageInfo,
        name: 'project_class_aggregate',
        variables: {
          projectId,
        },
      }}
      listData={{
        query: getClasses,
        variables: {
          projectId,
          order: [],
          limit: 10,
        },
        header: (
          <ListTable.Header>
            <ListTable.HeaderCell>名称</ListTable.HeaderCell>
            <ListTable.HeaderCell>颜色</ListTable.HeaderCell>
            <ListTable.HeaderCell>类型</ListTable.HeaderCell>
            <ListTable.HeaderCell>标签</ListTable.HeaderCell>
            <ListTable.HeaderCell />
          </ListTable.Header>
        ),
        render: <RenderList />,
      }}
      holder={{
        description: '没有任何数据集',
        action: {
          text: '创建数据集',
          url: newUrl,
        },
      }}
    />
  )
}

const mapDispatchToProps = {
  link: path => push(path),
  actionOpen: listTableDuck.creators.actionOpen,
}

export default connect(
  null,
  mapDispatchToProps,
)(ClassList)
